import React, { useMemo } from 'react';
import { filterTodos } from './utils.js'

export default function TodoList(props: { todos: any, theme: any, tab: any }) {
  const {todos, theme, tab} = props;
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  interface ITodo {
    id: number,
    completed: boolean,
    text: string,
  }
  return (
    <div className={theme}>
      <p><b>Note: <code>filterTodos</code> is artificially slowed down!</b></p>
      <ul>
        {visibleTodos.map((todo: ITodo) => (
          <li key={todo.id}>
            {todo.completed ?
              <s>{todo.text}</s> :
              todo.text
            }
          </li>
        ))}
      </ul>
    </div>
  );
}
